<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :rightCallback="rightCallback" slot="header" v-if="isShowHeader" ref="header">
      <p slot="content" style="margin-left: -12px">{{title}}</p>
      <p slot="rightContent" v-if="needRight">{{rightContent}}</p>
      <p slot="leftContent" v-if="needLeft">{{leftContent}}</p>
    </Yq-header>
    <div :style="boxStyle" style="width: 76%;margin: 0 auto;padding-top: 38px">
      <div class="piontContainer">
        <img src="../../../../../src/assets/images/user/icon_jifen@2x.png" height="55%" alt="">
        <p style="font-size: 30px;color: #636363;">{{userPiont}}</p>
        <p style="color: #a9a9a9;font-size: 15px;">我的积分</p>
      </div>
      <x-button type="primary" @click.native="integralCashFn" action-type="button" style="width: 80%;margin-top: 20px;background: #f95422;font-size: 15px;">转入余额</x-button>
      <p class="cashRecord" @click="cashRecordFn" align="center" style="color: #3d82e5;margin-top: 15px;font-size: 13px;"><span>兑现记录</span></p>
    </div>
    <div style="width: 100%;padding-top: 20px">
      <p style="text-align: center;color: #3d82e5;margin-bottom: 0px;" align="center">
        <a :href="qqLink"><img src="../../../../assets/kefuButtion.png" width="90px"/></a>
      </p>
    </div>
    <div style="padding: 0 10px;padding-top: 10px">
      <p style="font-size: 12px;color: #636363" class="rule-p">积分规则:</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">1、积分仅限孝行通孝心商城内使用</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">2、在孝心商城购物可以1积分=0.05元抵扣现金（暂不支持服务类商品）</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">3、在孝心商城购物，均可获得积分，非会员的积分基准返点比例为商品支付金额的50%，会员的积分基准返点比例为商品支付金额的100%</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">4、积分的数值精确到个位（小数点之后不计算在内）</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">5、买家在付款时，每笔订单可使用的积分额度根据具体商品而定</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">6、孝行通会员可使用积分转入余额功能，请进入“个人中心-成为会员”查看会员权益</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">7、积分仅限本人账户使用（暂不支持转让）</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">8、如发现刷积分、积分异常等问题，孝行通掌上养老可随时冻结账户以查证，具体请联系客服</p>
      <p style="font-size: 12px;color: #aaa9a9" class="rule-p">9、孝行通掌上养老保留在法律允许范围内对活动的最终解释权</p>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Alert } from 'vux'
  import YqHeader from '../../../../components/YqHeader.vue'
  import * as urls from '../../../../api/urls'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      YqHeader,
      Alert
    },
    data () {
      return {
        show: false,
        qqLink: '',
        message: '',
        userPiont: 5000,
        isShowTabbar: false,
        isShowHeader: true,
        title: '积分',
        rightContent: '积分明细',
        needBack: true,
        needRight: true,
        needLeft: false,
        leftContent: '',
        boxStyle: 'min-height: 200px;'
      }
    },
    methods: {
      onHide () {
      },
      onShow () {
      },
      cashRecordFn () {
        this.$router.push({
          path: '/pionts/CashRecord'
        })
        this.$router.go(1)
      },
      integralCashFn () {
        this.$router.push({
          path: '/pionts/IntegralCash'
        })
        this.$router.go(1)
      },
      rightCallback () {
        this.$router.push({
          path: '/pionts/Detail'
        })
        this.$router.go(1)
      },
      getWalletInfo () {
        let qq = window.sessionStorage.getItem('sysqq')
        this.qqLink = 'http://wpa.qq.com/msgrd?v=3&uin=' + qq + '&site=qq&menu=yes'
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.http(urls.userWallet, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.userPiont = res.data.point
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      weixinfn13 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getWalletInfo()
      this.weixinfn13()
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
    }
  }
</script>

<style scoped="scoped">
  .piontContainer{
    width: 100%;
    height: 160px;
    padding-top: 30%;
  }
  .piontContainer > img {
    display: block;
    margin: 0 auto;
  }
  p{
    text-align: center;
  }
  .rule-p {
    text-align: left;
  }
  .piontContainer > p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .piontContainer > p:nth-child(3){
    font-size: 20px;
    margin-bottom: 20px;
  }
  .cashRecord > span{
    padding-bottom: 2px;
    border-bottom:1px solid #3d82e5
  }
</style>
